<template>
  <div class="mine">
    <div class="sum">
      <img
        src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1rg7Qn.img?w=640&h=365&m=6"
        alt=""
      />
      <div class="text">斤斤计较</div>
    </div>
    <!-- 2 -->
    <div class="sumone">
      <div class="text">推荐分享</div>
      <div class="texts">&gt;</div>
    </div>
    <div class="sumtwo">
      <div class="text">推荐分享</div>
      <div class="texts">&gt;</div>
    </div>
    <div class="sumthree">
      <div class="text">推荐分享</div>
      <div class="texts">&gt;</div>
    </div>
    <div class="sumfour">
      <div class="text">推荐分享</div>
      <div class="texts">&gt;</div>
    </div>
    <div class="sumfive">
      <div @click="fn" class="text">推出登录</div>
      <div class="texts">&gt;</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {},
  methods: {
    fn() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.sum {
  width: 100%;
  height: 100px;
  background-color: lavender;
  display: flex;
  align-items: center;
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #000;
  }
  .text {
    margin-left: 30px;
    font-size: 15px;
    font-weight: 750;
  }
}
.sumone {
  height: 50px;
  display: flex;
  flex: 1;
  justify-content: space-between;

  padding: 10px 10px;
  .text {
    font-size: 15px;
  }
  .texts {
    font-size: 15px;
  }
}
.sumtwo {
  height: 50px;
  display: flex;
  flex: 1;
  justify-content: space-between;

  padding: 10px 10px;
  .text {
    font-size: 15px;
  }
  .texts {
    font-size: 15px;
  }
}
.sumthree {
  height: 50px;
  display: flex;
  flex: 1;
  justify-content: space-between;

  padding: 10px 10px;
  .text {
    font-size: 15px;
  }
  .texts {
    font-size: 15px;
  }
}
.sumfour {
  height: 50px;
  display: flex;
  flex: 1;
  justify-content: space-between;

  padding: 10px 10px;
  .text {
    font-size: 15px;
  }
  .texts {
    font-size: 15px;
  }
}
.sumfive {
  height: 50px;
  display: flex;
  flex: 1;
  justify-content: space-between;

  padding: 10px 10px;
  .text {
    font-size: 15px;
  }
  .texts {
    font-size: 15px;
  }
}
</style>
